<template>
	<view style="padding: 10px;">
		<u-form :model="formData" ref="uForm">
			<u-form-item label="姓名:"  prop="zzrxm" :border-bottom="false"  label-width="150" >
				<u-input v-model="formData.zzrxm" border="true" />
			</u-form-item>
			<u-form-item label="身份证号:" prop="zzrsfzh"  :border-bottom="false"  label-width="150" >
				<u-input v-model="formData.zzrsfzh" border="true" @click="keyboardShow=!keyboardShow"  :disabled="true"/>
			</u-form-item>
			<u-form-item label="手机号:"  :border-bottom="false"  label-width="150" >
				<u-input v-model="formData.zzrsjh" border="true" />
			</u-form-item>
			<u-form-item label="始租日期:"  :border-bottom="false" label-width="150" >
				<u-input v-model="formData.szrq" @click="show=!show" disabled="true" border="true"  />
			</u-form-item>
			<u-button @click="add()" :disabled="submitBtn" type="primary" >确认添加</u-button>
		</u-form>
		<u-calendar  v-model="show" :mode="mode" @change="change"></u-calendar>
		<u-keyboard ref="uKeyboard" mode="card" tips="身份证" :safe-area-inset-bottom="true" @change="valChange" @backspace="backspace" v-model="keyboardShow"></u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyboardShow:false,
				submitBtn:false,
				show:false,
				mode: 'date',
				formData:{
					szrq:this.$util.getNowD(),
					zzrxm:'',
					zzrsfzh:'',
					zzfsjh:'',
				},
				rules: {
					zzrxm: [
						{ 
							required: true, 
							message: '请输入姓名',  
							trigger: ['change','blur'],
						}
					],
					zzrsfzh: [
						{
							required: true, 
							message: '请输入身份证号', 
							trigger: ['change','blur'],
						},
						{
							min: 18, 
							message: '身份证号不能少于18个字符', 
							trigger: ['change','blur']
						}
					]
				}
			}
		},
		methods:{
			add(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.submitBtn = true;
						uni.$emit('addZzr',this.formData);
						this.$u.route({
							type:'back',
							delta: 1
						})
					} else {
						console.log('表单信息不完整');
					}
				});
			},
			change(e){
				this.formData.szrq  = e.result;
			},
			valChange(val){
				if(this.formData.zzrsfzh.length<18){
					this.formData.zzrsfzh += val;
				}
			},
			backspace(){
				if(this.formData.zzrsfzh.length) this.formData.zzrsfzh = this.formData.zzrsfzh.substr(0, this.formData.zzrsfzh.length - 1);
			},
		},
		onLoad() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
</style>
